<template>
  
  <el-row >   
  
    <el-menu  class="el-menu-vertical-demo">

      <h3>Element-ui(2.15.13)的封装</h3>
      <NavItem v-for="listObj in lists" :key="listObj.id" :list="listObj"/>
      <el-divider></el-divider>   
      <h3>Element-ui(2.15.13)的常见问题</h3> 
      <NavItem v-for="listObj in lists1" :key="listObj.id" :list="listObj"/>
      <el-divider></el-divider>   
      <h3>Vue2(2.7.14)的常见问题</h3> 
      <NavItem v-for="listObj in lists2" :key="listObj.id" :list="listObj"/>

    </el-menu>   
   
  </el-row>

</template>

<script>
import NavItem from './NavItem.vue';
import {mapState} from 'vuex'
export default {
  name:'NavMenu',
  components:{NavItem},
  data() {
    return {
        isCollapse: true,
      
    }
  },
  methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
  },
  computed:{
    ...mapState('navAbout',['lists','lists1','lists2'])
  }
}
</script>

<style scoped>
   .el-menu-vertical-demo:not(.el-menu--collapse) {
    width:auto;
    height: 90vh;
    padding-top: 10px;
    padding: 0px 10px;
    overflow-y: scroll;
  }
  .el-menu-vertical-demo{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    border: none;  
  }

  .el-menu-item, .el-submenu__title{
    white-space: normal;
    height: auto;
    line-height: 25px;
    list-style: none;
    padding:10px 5px;
  }
</style>